<template>
  <el-dialog title="新增用户" :visible="showDialog" @close="btncancel">
    <!-- 表单 -->
    <el-form label-width="120px">
      <el-form-item label="用户名">
        <el-input style="width: 50%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input style="width: 50%" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="密码">
        <el-date-picker style="width: 50%" placeholder="请选择入职时间" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select style="width: 50%" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="权限组名称">
        <el-input style="width: 50%" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input style="width: 50%" placeholder="请选择部门" />
      </el-form-item>
      <el-form-item label="介绍">
        <el-date-picker style="width: 50%" placeholder="请选择转正时间" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btncancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnok">确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
export default {
  methods: {
    btncancel() {
      this.showDialog = false;
    },
    btnok() {
      this.showDialog = false;
    },
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style>
</style>